<!DOCTYPE html>
<html lang="en">

<head>
    <title>电子竞技</title>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <link href="../../css/public.css" rel="stylesheet">
    <style>
        .personal_Info {
            height: 30%;
            background: url(../../images/eSports/bg_pk.png) center 0 no-repeat;
            background-size: 100% 100%;
            position: relative;
            padding-top: 13%;
        }
        .challenge {
            position: absolute;
            top: 20px;
            right: 20px;
            
        }

        .challenge img {
            width: .65rem;
        }

        .user-logo {
            display: block;
            margin: auto;
            
            width: 25%;
            border-radius: 100%;
        }

        .user-name {
            text-align: center;
            margin-top: 10px;
            font-size: .4rem;
        }

        .gold {
            text-align: center;
            margin-top: 5px;
        }

        .gold img {
            width: .5rem;
            vertical-align: sub;
            margin-right: 5px;
        }

        .gold a {
            color: #FFCD29;
            font-size: .5rem;
        }

        .numberPeople {
            background: url(../../images/eSports/bg_pk_game.png) center 0 no-repeat;
            background-size: 100%;
        }

        .headTitle,
        .game {
            display: flex;
            height: 50px;
            line-height: 50px;
            font-size: .4rem;
            border-bottom: 1px solid #202160;
        }

        .headTitle div {
            flex: 1;
            text-align: center;
            color: #7E85C2;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .game div {
            flex: 1;
            text-align: center;
            color: #FFCD29;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: .37rem;
        }

        .game .gameName {
            font-size: .37rem;
            color: #D0D2F7;
        }

        .game .online,
        .onlineLol,
        .onlineChiji {
            color: #fff;
            background: #F4C11C;
            border-radius: 5px;
            height: 60%;
            width: 92%;
            margin: 10% auto;
            border: 0;
            font-size: .35rem
        }
        .nav .pay span {
            color: #FFB400;
        }
        body {
            margin-bottom: 0;
        }
        .error-modal {  
            display: none;  
            position: fixed;
            top: 0;
            bottom: 0;
            width: 100%;
            height: 1000%;
            background: rgba(0,0,0,0.6);
            z-index: 150;
        }
        .error-modal .content {
            margin: 220px auto 0;
            width: 70%;
            height: 200px;
            line-height: 200px;
            background: #1b1d68;
            border-radius: 4px;
            text-align: center;
            font-size: .5rem;
        }
    </style>
</head>

<body>
    <div class="personal_Info">
        <div class="challenge">
            <a href="./tradingRecord.html">
                <img src="../../images/eSports/icon_record .png" alt="">
            </a>
        </div>
        <img class="user-logo" src="../../images/personal/image_portrait.png" alt="">
        <div class="user-name">LYLSP</div>
        <div class="gold">
            <img src="../../images/rank/icon_gold.png" alt="">
            <a class="accoun_balance">0</a>
        </div>
    </div>
    <div class="numberPeople">
        <div class="headTitle">
            <div> 游戏名</div>
            <div>在线人数</div>
            <div>最高人数</div>
            <div>最低人数</div>

        </div>

        <div class="game">
            <div class="gameName"> 王者荣耀</div>
            <div>
                <button class="online"></button>
            </div>
            <div>96485762</div>
            <div>1642331</div>
        </div>
        <div class="game">
            <div class="gameName"> 英雄联盟</div>
            <div>
                <button class="onlineLol"></button>
            </div>
            <div>97485762</div>
            <div>2642331</div>
        </div>
        <div class="game">
            <div class="gameName"> 荒野行动</div>
            <div>
                <button class="onlineChiji"></button>
            </div>
            <div>94485762</div>
            <div>2542331</div>
        </div>

    </div>
    <div class="error-modal">
        <div class="content">该功能暂未开放!</div>
    </div>
    <div class="nav">
        <a class="home" href="../home/home.html">
            <img src="../../images/nav/icon_home.png" alt="">
            <br>
            <span>首页</span>
        </a>
        <!-- <a><a href="">赛事</a></a> -->
        <a class="rank" href="../rank/rank_home.html">
            <img src="../../images/nav/icon_ranking list.png" alt="">
            <br>
            <span>排行榜</span>
        </a>
        <a class="pay" href="../eSports/eSports.html">
            <img src="../../images/nav/icon_pk.png" alt="">
            <br>
            <span href="">电子竞技</span>
        </a>
        <a class="personal" href="../personal/personal.html">
            <img src="../../images/nav/icon_user.png" alt="">
            <br>
            <span>个人中心</span>
        </a>
    </div>

    <script src="../../js/jquery-3.2.1.min.js"></script>
    <script src="../../js/public.js"></script>
    <script>
        $(function () {
            $.post(userInfoUrl, (res) => {
                console.log(res)
                let userInfo = res.obj
                let balance = userInfo.fdOver,
                    phone = userInfo.fdMobile,
                    name = userInfo.fdNickname,
                    logoUrl = userInfo.fdAvatarUrl,
                    userId = res.obj.fdId

                $('.user-logo').attr('src', logoUrl)
                $('.user-name').text(name)
                $('.accoun_balance').text(balance)




                // let webSocketKing = new WebSocket('ws://192.168.1.41:8081/gamingDataForKing?flag=' +
                //     userId);
                // webSocketKing.onopen = function (e) {
                //     webSocketKing.send(userId);
                // }
                // webSocketKing.onmessage = function (event) {
                //     console.log(event)
                //     let m = event.data.split(":")[3].split('"')[1];
                //     //  console.log(m)
                //     $('.online').text(m)

                //     //   
                // };
                let handel1=setInterval(function() {
                    let m;
                    $.post('http://120.79.198.159/data/pushData',{gameName:'wzry'},(res)=>{
                        // console.log(res);
                        let data=JSON.stringify(res),
                        m=data.split(':')[3].split('"')[1]
                        clearInterval(handel1)
                        // console.log(m)
                        $('.online').text(m)
                    })
                },100)

                let handel2=setInterval(function() {
                    let m;
                    $.post('http://120.79.198.159/data/pushData',{gameName:'yxlm'},(res)=>{
                        // console.log(res);
                        let data=JSON.stringify(res),
                        m=data.split(':')[3].split('"')[1]
                        clearInterval(handel2)
                        // console.log(m)
                        $('.onlineLol').text(m)
                    })
                },100)


                let handel3=setInterval(function() {
                    let m;
                    $.post('http://120.79.198.159/data/pushData',{gameName:'hyxd'},(res)=>{
                        // console.log(res);
                        let data=JSON.stringify(res),
                        m=data.split(':')[3].split('"')[1]
                        clearInterval(handel3)
                        // console.log(m)
                        $('.onlineChiji').text(m)
                    })
                },100)

                setInterval(function() {
                    let m;
                    $.post('http://120.79.198.159/data/pushData',{gameName:'wzry'},(res)=>{
                        // console.log(res);
                        let data=JSON.stringify(res),
                        m=data.split(':')[3].split('"')[1]
                        // console.log(m)
                        $('.online').text(m)
                    })
                },1000*Math.ceil(Math.random()*3))

                setInterval(function() {
                    let m;
                    $.post('http://120.79.198.159/data/pushData',{gameName:'yxlm'},(res)=>{
                        // console.log(res);
                        let data=JSON.stringify(res),
                        m=data.split(':')[3].split('"')[1]
                        // console.log(m)
                        $('.onlineLol').text(m)
                    })
                },1000*Math.ceil(Math.random()*3))


                setInterval(function() {
                    let m;
                    $.post('http://120.79.198.159/data/pushData',{gameName:'hyxd'},(res)=>{
                        // console.log(res);
                        let data=JSON.stringify(res),
                        m=data.split(':')[3].split('"')[1]
                        // console.log(m)
                        $('.onlineChiji').text(m)
                    })
                },1000*Math.ceil(Math.random()*3)) 
            })
            // $('.online').click(function () {
            //     window.location.href = './Kline.html?type=0'
            // })
            // $('.onlineLol').click(function () {
            //     window.location.href = './KlineLol.html?type=1'
            // })
            // $('.onlineChiji').click(function () {
            //     window.location.href = './KlineChiji.html?type=2'
            // })
            $('.game button').on('click',function(){
                $('.error-modal').fadeIn();
                setTimeout(function () {
                    $('.error-modal').fadeOut();
                }, 3000);
            })
            $('.error-modal').on('click',function(){
                $('.error-modal').fadeOut();
            })
        })
    </script>
</body>

</html>